<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" shape="round" placeholder="衣柜"  @search="onSearch"/>
        <van-grid>
            <van-grid-item icon="card" text="电器" />
            <van-grid-item icon="add-square" text="家具" />
            <van-grid-item icon="live" text="电子" />
            <van-grid-item icon="lock" text="日用" />
            <van-grid-item icon="audio" text="服装" />
            <van-grid-item icon="graphic" text="箱包" />
            <van-grid-item icon="column" text="图书" />
            <van-grid-item icon="invitation" text="更多分类" />
        </van-grid>

        <div class="a1" style="width: 100%; height: 400px;">
            <div style="width: 150px;height: 150px; ">
                <img src="../../image/1.png" alt="" style="width: 150px;height: 150px;">
            </div>
            <div style="width: 150px;height: 140px; margin-left: 218px; margin-top: -150px; float: left;">
                <img src="../../image/2.png" alt="" style="width: 150px;height: 140px;">
            </div>
            <div style="width: 150px;height: 180px; margin-top: 15px;" class="a4">
                <img src="../../image/3.png" alt="" style="width: 150px;height: 180px;">
            </div>
            <div style="width: 150px;height: 160px; margin-left: 218px; margin-top: -150px; float: left;">
                <img src="../../image/4.png" alt="" style="width: 150px;height: 160px;">
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const value = ref('');
  const onSearch = () => {
          router.push('/ss')
  }
</script>

<style lang="scss" scoped></style>